<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

/* const animationDuration = 6000*/

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    barData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      var option
      var name = []
      var dataProportion = {}
      var dataset = {}
      var dataname = []
      for (var i = 0; i < this.barData.data.length; i++) {
        name.push(this.barData.data[i].name)
        for (var j = 0; j < this.barData.data[i].data.length; j++) {
          if (i === 0) {
            dataname.push(this.barData.data[i].data[j].name)
          }

          if (dataset[this.barData.data[i].name]) {
            dataset[this.barData.data[i].name].push(this.barData.data[i].data[j].count)
          } else {
            dataset[this.barData.data[i].name] = [this.barData.data[i].data[j].count]
            dataProportion[this.barData.data[i].name] = {}
          }
          dataProportion[this.barData.data[i].name][this.barData.data[i].data[j].name] = this.barData.data[i].data[j].value + '/' + this.barData.data[i].data[j].count
        }
      }
      var emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0,0,0,0.3)'
        }
      }
      option = {
        backgroundColor: 'rgba(128, 128, 128, 0.1)', // rgba设置透明度0.1
        legend: {
          data: name,
          right: 0,
          top: 10,
          textStyle: {
            color: '#94e5ff',
            fontSize: 10
          }
        },
        grid: {
          top: '28%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          data: dataname,
          // 设置坐标轴字体颜色和宽度
          axisLine: { // 这是x轴文字颜色
            show: false,
            lineStyle: {
              color: '#94e5ff',
              fontSize: 10
            }
          },
          splitLine: {
            show: false// 去除网格线
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#94e5ff'
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#94e5ff', // 更改坐标轴文字颜色
              fontSize: 10 // 更改坐标轴文字大小
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            // show: false//去除网格线
            lineStyle: {
              color: '#94e5ff',
              type: 'dashed',
              opacity: 0.5,
              width: 0.5
            }
          }
        },
        series: [
          {
            name: name[0],
            type: 'bar',
            emphasis: emphasisStyle,
            data: dataset[name[0]],
            barWidth: 25,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#2cdedd' },
                    { offset: 1, color: '#0895e0' }
                  ]
                ),
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: '94e5ff',
                    fontSize: 10
                  },
                  formatter: function(data) {
                    return dataProportion[name[0]][data.name]
                  }
                }

              }
            }
          },
          {
            name: name[1],
            type: 'bar',
            emphasis: emphasisStyle,
            data: dataset[name[1]],
            barWidth: 25,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#c83526' },
                    { offset: 1, color: '#f25849' }
                  ]
                ),
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: '94e5ff',
                    fontSize: 10
                  },
                  formatter: function(data) {
                    return dataProportion[name[1]][data.name]
                  }
                }

              }
            }
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

